<template>
	<view>
		<!-- <view class="topimage">
			<image :src="imageUrl"></image>
		</view> -->

		<view class="carousel" circular autoplay="true" interval="3000">
			<view class="carousel-item">
				<image :src="imageUrl"></image>
			</view>
		</view>

		<view style="height: 170rpx;">
			<view style="padding-left: 34rpx;padding-right: 32rpx;padding-top: 20rpx;">
				<view class="machineName">
					<text>{{machineName}}</text>
				</view>
				<view class="desc">
					<text>{{desc}}</text>
				</view>
			</view>
		</view>
		<view class="cut"></view>
		<view class="dates">
			<view :class="panduan1==index ? 'dateseled':'datesel' " v-for="(item, index) in selectdates" :key="index"
				@click="changeDate(item,$event,index)">
				<view :class="panduan1==index ? 'datetxt_selected':'datetxt' ">
					<text>{{item.dateFormat}}</text>
				</view>
				<view :class="panduan1==index ? 'wektxt_selected':'wektxt' ">
					<text>{{item.week}}</text>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 20rpx;">
			<view
				style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;margin-bottom: 20rpx;">
				<text>套餐选择</text>
			</view>
			<view class="mealsels">
				<view :class="panduan==index ? 'mealsel_ed':'mealsel' " v-for="(item, index) in meals" :key="index"
					@click="changePrice(item,$event,index)" style="height: 30%;width: 40%;">
					<view :class="panduan==index ? 'mealname_ed':'mealname' ">
						<text>{{item.mealName}}</text>
					</view>
					<view :class="panduan==index ? 'mealprice_ed':'mealprice' ">
						<text style="font-size: 22rpx;">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 32rpx;">
			<view class="timesel">
				<text>时间选择</text>
			</view>
			<view style="display: flex;margin-top: 24rpx;">
				<view class="starttime">
					<e-picker :showValue="pickertime" mode="time" @change="change">
						<text class="kaishitime">开始时间</text>
						<text class="kaishi">{{startStr}}</text>
						<text class="iconfont icon-edit"
							style="color: #37b285;font-size: 28rpx;margin-left: 10rpx;"></text>
					</e-picker>
				</view>
				<view class="starttime" style="background: #F1F3F4;margin-left: 25rpx;">
					<text class="kaishitime">结束时间</text>
					<text class="kaishi" style="color: #555555;">{{endStr}}</text>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 32rpx;margin-bottom: 32rpx;">
			<view class="timesel">
				<text>房间使用状态</text>
			</view>
			<view class="jindu">
				<view class="currentOrder" v-if="currentOrder.length>0">
					<text style="font-size: 26rpx;font-weight: 600;color: #ff4741;">当前订单：</text>
					<text style="font-size: 26rpx;font-weight: 600;color: #ff4741;">{{currentOrder[0].startTime}} - {{currentOrder[0].endTime}}</text>
				</view>
				<view class="currentOrder" v-if="yuyueOrder.length>0" v-for="(item, index) in yuyueOrder" :key="index">
					<text style="font-size: 26rpx;font-weight: 600;color: #a8911d;">预约订单：</text>
					<text style="font-size: 26rpx;font-weight: 600;color: #a8911d;">{{yuyueOrder[index].startTime}} - {{yuyueOrder[index].endTime}}</text>
				</view>
			</view>
		</view>
		<view class="cut"></view>


		<!-- <view class="zhifutuan">
			<view class="tuangou" v-if="num==0" @click="goHexiao()">
				<view class="iconfont icon-code"
					style="font-size: 40rpx;color:#37b285 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;">
				</view>
				<view class="tuangoutitle">
					<text style="color: #666666;">团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>暂无可用团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="tuangou" v-if="num!=0&&!selected" @click="goMyCertificate()">
				<view class="iconfont icon-code"
					style="font-size: 40rpx;color:#37b285 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;">
				</view>
				<view class="tuangoutitle">
					<text>团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>可用<text style="color: #F04747;font-size: 32rpx;font-weight: 500;">{{num}}</text>张团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="tuangou" v-if="num!=0&&selected" @click="goMyCertificate()">
				<view class="iconfont icon-code"
					style="font-size: 40rpx;color:#37b285 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;">
				</view>
				<view class="tuangoutitle">
					<text>团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>已选<text style="color: #F04747;font-size: 32rpx;font-weight: 500;">1</text>张团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
		</view> -->



		<view class="mealdetail">
			<view style="display: flex;">
				<view
					style="width: 4rpx;height: 28rpx;background: #37b285;border-radius: 2rpx;line-height: 28rpx;margin-right: 10rpx;">
				</view>
				<view
					style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;line-height: 28rpx;">
					<text>预定须知</text>
				</view>
			</view>
			<view class="xuzhi">
				<text>我们仅提供场地及相应设备设施，使用人须遵守治安管</text>
				<text>理条例，违者由使用人自行承担相应责任及后果。</text></br>
				<text>
					1.严禁未成年人进入场所。
					2.严禁黄、赌、毒、打架斗殴等一切违法活动。
					3.使用人须自行对身体状况负责注意个人安全。
					4.破坏或带走本场所提供的设备设施请照价赔偿。
					5.请自行保管好私人物品，如有遗失概不负责。
				</text>
				<!-- <view class="chongzhi" @click="toChongzhi()">
					<image src="/static/img_rechage_label.png"></image>
				</view> -->
			</view>
		</view>
		<view style="height: 108rpx;"></view>
		<view class="commit">
			<view style="width: 475rpx;position: relative;">
				<view style="padding-left: 31rpx;">
					<text
						style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;">总计</text>
					<text
						style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #EA4A33;">￥</text>
					<text
						style="font-size: 40rpx;font-family: Source Han Sans CN;font-weight: 400;color: #EA4A33;">{{price}}</text>
				</view>
				<view style="line-height: 17rpx;padding-left: 31rpx;">
					<text style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #9A9A9A;">
						已选{{duration}}小时
					</text>
				</view>

			</view>
			<view style="display: flex;justify-content: center;align-items: center;" @click="buyMeal()">
				<view class="submit">
					<text class="iconfont icon-reservation"
						style="color: #FFFFFF;font-size: 34rpx;margin-right: 10rpx;"></text>
					<text>立即预定</text>
				</view>
			</view>
		</view>
		<uni-popup ref="tishi" :mask-click="true" type="center">
			<view class="unipopup">
				<view style="width: 100%;text-align: center;padding-top: 20rpx;">
					<text class="successtxt">预约信息确认</text>
				</view>
				<view class="info">
					<view class="yuyueinfo"><text>预约门店:{{storeName}}</text></view>
					<view class="yuyueinfo"><text>预约包间:{{machineName}}</text></view>
					<view class="yuyueinfo"><text>开始时间:{{params.startTime}}</text></view>
					<view class="yuyueinfo"><text>结束时间:{{params.endTime}}</text></view>
				</view>
				<view class="xuzhipopup">
					<view class="xuzhititle">
						<text>预定须知:</text>
					</view>
					<view class="xuzhitxt">
						<text>1.预定的订单将全时段保留，迟到不可顺延和退款。</text>
					</view>
					<view class="xuzhitxt">
						<text>2.若订单时段前包厢无人使用，可以提前开始订单，但是订单总时长不变。</text>
					</view>
					<view class="xuzhitxt">
						<text>3.订单开始以后不可取消和退款，请合理规划您的时间。</text>
					</view>
					<view class="xuzhitxt">
						<text>4.预定表示对以上信息须知的认可。</text>
					</view>
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<view class="buttomupdate" @click="closeTishi()"><text>返回修改</text></view>
					<view class="buttomafrim" @click="submit()"><text>立即预定</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ePicker from '@/components/e-picker/e-picker.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	const {
		dateTimePicker,
		getMonthDay
	} = require('@/components/date.js');
	export default {
		components: {
			ePicker
		},
		data() {
			return {
				params: null,
				device: null,
				storeId: 0,
				meals: [],
				panduan1: 0,
				machineName: '',
				price: 0,
				mealId: 0,
				deviceId: 0,
				showPicker: false,
				type: 'rangetime',
				value: '',
				endTime: '',
				panduan: 0,
				times: [],
				isSale: 0,
				startTime: '',
				currentMeal: null,
				imageUrl: '',
				desc: '',
				currentOrder: [],
				yuyueOrder: [],
				mealName: '4小时',
				address: '',
				status: 0,
				dateTime: null,
				dateTimeArray: null,
				startYear: 2000,
				timeStr: '',
				tishi: true,
				dasaoTime: 0,
				startStr: '',
				endStr: '',
				duration: 0,
				dates: [],
				imgs: [],
				storeName: '',
				selectdates: [],
				pickertime: '22:45:00',
				selectdate: '',
				hasCertificate: false,
				num: 0,
				certificate: null,
				selected: false
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			console.log(options.dasaoTime)
			this.timeStr = this.dateFormat(new Date());
			this.startStr = this.dateFormattime(new Date(this.timeStr));
			this.pickertime = this.startStr + ':00'
			this.dates[0] = this.getDays(this.timeStr, 0);
			this.dates[1] = this.getDays(this.timeStr, 24);
			this.dates[2] = this.getDays(this.timeStr, 48);
			this.storeId = options.storeId;
			this.desc = options.desc;
			this.imageUrl = options.image;
			this.status = options.status;
			this.machineName = options.machineName;
			this.deviceId = options.deviceId;
			this.address = options.address;
			this.getDeviceMeal(options.deviceId, options.dasaoTime);
			this.dasaoTime = options.dasaoTime;
			this.getYuyueOrder();
			this.getDevice(options.deviceId);
			this.storeName = options.storeName;
		},
		onShow() {},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '可预订'
				}
				if (status == 1) {
					return '使用中'
				}
				if (status == 2) {
					return '未打扫'
				}
				if (status == 3) {
					return '维护中'
				}
				if (status == 4) {
					return '已禁用'
				}
			}
		},
		methods: {
			goHexiao() {
				this.$refs.doorpopup.open('center')
			},
			hexiao(type) {
				console.log(type)
				if (type == 0) {
					uni.navigateTo({
						url: '/pages/douyin/hexiao?storeId=' + this.storeId
					})
				} else {
					uni.navigateTo({
						url: '/pages/meituan/hexiao?storeId=' + this.storeId
					})
				}
				this.$refs.doorpopup.close()
			},
			async getCertificate(meal) {
				let integral = meal.integral;
				let storeId = this.storeId;
				let params = {
					integral: integral,
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.certificate.listByStore, params);
				if (data) {
					console.log(data.length)
					this.num = data.length;
				}
			},
			async getDevice(deviceId) {
				let data = await Api.apiCall('get', Api.device.getDeviceById, {
					id: deviceId
				});
				if (data) {
					console.log(data)
					this.device = data.device;
					this.selectdates = data.dates;
					this.selectdate = this.selectdates[0].date
				}
			},
			dateFormat(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
			},
			dateFormattime(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
				return hours + ":" + minutes;
			},
			sure() {
				this.tishi = false;
			},
			async getDeviceMeal(deviceId, dasaotime) {
				let params = {
					storeId: this.storeId,
					deviceId: deviceId
				}
				let data = await Api.apiCall('get', Api.device.getDeviceMeal, params);
				if (data) {
					console.log(data);
					this.meals = data;
					this.meal = this.meals[0];
					// this.getCertificate(this.meal)
					this.price = this.meal.price
					this.duration = this.meal.duration
					let time = this.addMinute(this.timeStr, dasaotime);
					console.log(dasaotime)
					this.endTime = this.addMinute(this.timeStr, (this.meals[0].duration) * 60);
					this.endStr = this.dateFormattime(new Date(this.endTime))
					console.log(time)
					this.getCurrentOrder(dasaotime);
				}
			},
			change(e) {
				console.log(111)
				this.pickertime = e
				console.log(e)
				let time = e;
				time = time.substr(0, 5);
				this.timeStr = this.selectdate + ' ' + time;
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				let duration = this.duration;
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
			},
			async getCurrentOrder(dasaoTime) {
				let params = {
					deviceId: this.deviceId
				}
				let data = await Api.apiCall('get', Api.order.getCurrentOrder, params);
				if (data) {
					this.currentOrder = data;
					if (this.currentOrder.length > 0) {
						let newStartTime = new Date(this.currentOrder[0].endTime);
						this.timeStr = this.addMinute(newStartTime, dasaoTime);
						console.log(this.timeStr)
						this.endTime = this.addMinute(this.timeStr, (this.meals[0].duration) * 60)
						this.endStr = this.dateFormattime(new Date(this.endTime))
						this.startStr = this.dateFormattime(new Date(this.timeStr));
						this.pickertime = this.startStr + ':00'
					}
					console.log('current:' + this.timeStr)
				}
			},
			async getYuyueOrder() {
				let params = {
					deviceId: this.deviceId
				}
				let data = await Api.apiCall('get', Api.order.getYuyueOrder, params);
				if (data) {
					this.yuyueOrder = data;
					console.log("======" + JSON.stringify(this.yuyueOrder));
				}
			},
			changePrice(item, e, index) {
				console.log(this.currentOrder.length)
				let i = new Date(this.timeStr).getTime();
				let j = new Date().getTime()
				if ((j - i) > 6000) {
					this.timeStr = this.dateFormat(new Date());
				}
				// if (this.currentOrder.length==0) {
				// 	this.timeStr = this.dateFormat(new Date());
				// }
				this.panduan = index
				console.log(e)
				this.isSale = 0;
				let duration = item.duration;
				this.duration = duration;
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
				console.log(this.endTime)
				this.price = item.price;
				this.mealId = item.id;
				this.meal = item;
				// this.getCertificate(this.meal);
			},
			async changePriceSale(item) {
				let duration = item.duration;
				this.endTime = this.addDays(this.datetime, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
				let params = {
					storeId: this.storeId,
					mealId: item.id
				}
				let data = await Api.apiCall('get', Api.device.saleMeal, params);
				if (data) {
					this.times = data;
					console.log(this.times);
					this.timeStr = this.times[0];
					this.startStr = this.dateFormattime(new Date(this.timeStr))
					this.endTime = this.times[1]
					this.endStr = this.dateFormattime(new Date(this.endTime))
					this.price = item.price;
					this.mealId = item.id;
					this.meal = item;
				}
			},
			addDays(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
			getDays(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return m + "月" + d + "日";
			},
			addMinute(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			// },
			// toChongzhi() {
			// 	uni.navigateTo({
			// 		url: '/pages/money/recharge?storeId=' + this.storeId
			// 	})
			},
			async buyMeal() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录后下单.',
						success: function(res) {
						    if (res.confirm) {
						        uni.redirectTo({
						            url: '/pages/public/login'
								});
							} else if (res.cancel) {
							}
						}
					});
					return false;
			    }
				let that = this;
				if (that.meal == null) {
					uni.showToast({
						icon: "error",
						title: '请选择套餐'
					})
					return false
				}
				let params = {
					deviceId: that.deviceId,
					storeId: that.storeId,
					mealId: that.meal.id,
					startTime: that.timeStr,
					endTime: that.endTime,
					price: that.meal.price,
					mealName: that.meal.mealName
				};
				if (that.isSale == 1) {
					if (that.timeStr == '' || that.endTime == '') {
						uni.showToast({
							icon: "error",
							title: '请选择套餐'
						})
						return false;
					}
				} else {
					if (that.timeStr == '' || that.endTime == '') {
						uni.showToast({
							icon: "error",
							title: '请选择套餐'
						})
						return false;
					}
				}
				this.checkProtect(params);
			},
			async checkIsIntersect(params) {
				let data = await Api.apiCall('post', Api.order.checkIsIntersect, params);
				if (data && data == 1) {
					uni.showModal({
						title: '订单时间冲突',
						content: '有客户正在预订付款或房间已被预约,该时段已被锁定',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {

							}
						}
					});
				} else {
					this.params = params
					this.confirm();
					// this.submit(params)
				}
			},
			confirm() {
				this.$refs.tishi.open('center')
			},
			confirmStartTime(e) {
				console.log(e)
			},
			closeTishi() {
				this.$refs.tishi.close()
			},
			async checkProtect(params) {
				//续费保护
				let data = await Api.apiCall('post', Api.order.checkProtect, params);
				let that = this;
				if (data && data == 1) {
					if (that.dasaoTime == 0) {
						uni.showModal({
							title: '订单时间冲突',
							content: '有客户正在预订付款或房间预备预约，房间已被锁定',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {

								}
							}
						});
					} else {
						uni.showModal({
							title: '订单时间冲突',
							content: '预约时间不得与其他用户冲突,并且订单间需要预留【' + that.dasaoTime + '分钟】用于打扫',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {

								}
							}
						});
					}
				} else {
					this.checkIsIntersect(params);
				}
			},
			showStart() {
				this.$refs.picker.show()
			},
			goMyCertificate() {
				uni.navigateTo({
					url: '/pages/user/mycertificate?type=1&integral=' + this.meal.integral + '&storeId=' + this
						.storeId
				});
			},
			changeDate(item, e, index) {
				this.panduan1 = index;
				this.selectdate = this.selectdates[index].date;
				if (index == 0) {
					this.timeStr = this.dateFormat(new Date());
					this.getDeviceMeal(this.deviceId, this.dasaoTime);
					this.startStr = this.dateFormattime(new Date(this.timeStr));
					this.pickertime = this.startStr + ':00'
				} else {
					this.pickertime = '00:00:00'
				}
				let time = this.pickertime;
				time = time.substr(0, 5);
				this.timeStr = this.selectdate + ' ' + time;
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				let duration = this.duration;
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
			},
			async submit() {
				let params = this.params;
				let date = new Date(this.timeStr + ':59');
				if (date.getTime() < new Date().getTime()) {
					if (this.meal.isSale == 0) {
						uni.showToast({
							icon: 'error',
							title: '开始时间无效'
						})
						return false;
					} else {
						//闲时单
						if (new Date().getTime() > new Date(this.endTime).getTime()) {
							uni.showToast({
								icon: 'error',
								title: '闲时单不可用'
							})
							return false;
						}
					}

				}
				if(this.endStr.match('NaN')){
					uni.showModal({
						title: '时间格式错误',
						content: '请刷新页面或者重新选择套餐时间',
						showCancel: false,
						success: function(res) {
						}
					});
					return false;
				}
				let data = await Api.apiCall('post', Api.order.createOrder, params);
				console.log(data);
				let that = this;
				if (data) {
					let num = that.num;
					let selected = that.selected;
					let id = data.id;
					if (num != 0 && selected) {
						//券支付
						that.certPay(id);
					} else {
						let url = `/pages/money/pay?id=${id}`;
						uni.redirectTo({
							url: url
						});
					}
				} else {
					that.$core.msg(data);
				}
			},
			async certPay(id) {
				let params = {
					orderId: id,
					certId: this.certificate.id
				}
				let data = await Api.apiCall('post', Api.certificate.certPay, params);
				if (data && data == 1) {
					uni.redirectTo({
						url: '/pages/money/paySuccess'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.timesel {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1A1A1A;
	}

	.drug-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.drug-listtext {
		font-weight: bold;
	}

	.drugtext {
		width: 690rpx;
		height: auto;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #666666;
		margin-bottom: 30rpx;
		/* text-indent: 2em; */
	}

	.cut {
		height: 10rpx;
		background-color: #F7F7F7;
	}

	.commit {
		width: 750rpx;
		height: 108rpx;
		background: #FFFFFF;
		color: #3d3d3d;
		bottom: 0;
		display: flex;
		position: fixed;
		box-shadow: 0 0 10px #e6e6e6;
	}

	.carousel {
		width: 686rpx;
		height: 320rpx;
		margin-left: 32rpx;

		image {
			width: 100%;
			height: 100%;
			background: #493D3E;
			border-radius: 24rpx;
			margin-top: 10rpx;
		}

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}
	}

	.topimage {
		width: 686rpx;
		height: 320rpx;
		margin-left: 32rpx;
	}

	.topimage image {
		width: 100%;
		height: 100%;
		background: #493D3E;
		border-radius: 24rpx;
		margin-top: 10rpx;
	}

	.drug-explain {
		flex: 1;
		font-size: 28rpx;
		text-align: left;
		color: #666666;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.colum {
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;
	}

	.yuyueinfo {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		letter-spacing: 2rpx;
	}

	.datesel {
		width: 160rpx;
		height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		margin-right: 15rpx;
		display: inline-block;
	}

	.dateseled {
		width: 160rpx;
		height: 84rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 16rpx;
		margin-right: 15rpx;
		display: inline-block;
	}

	.datetxt {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		text-align: center;
	}

	.datetxt_selected {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 42rpx;
		text-align: center;
	}

	.xuzhipopup {
		height: auto;
		width: 100%;
		padding-left: 22rpx;
	}

	.xuzhititle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #ff0004;
	}

	.colum-selected {
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		background-color: #55aaff;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;

		view {
			color: #ffffff;
		}
	}

	.drug-explain1 {
		flex: 1;
		font-size: 34rpx;
		text-align: left;
		font-weight: 900;
		color: #29936d;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.wektxt {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
		text-align: center;
	}

	.wektxt_selected {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		text-align: center;
	}

	.drugtxt {
		display: flex;
		width: 690rpx;
		height: 250rpx;
		padding-top: 25rpx;
		padding-left: 25rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.buttomopendoor1 {
		width: 400rpx;
		height: 80rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 80rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	.buttomopendoor2 {
		width: 400rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-top: 24rpx;
	}

	.drugexplain {
		width: 440rpx;
		height: 200rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.drugimg {
		width: 190rpx;
		height: 190rpx;
	}

	.machineName {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}

	.submit {
		width: 220rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 29rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-top: 13rpx;
		padding-right: 4rpx;
	}

	.mealsels {

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		height: auto;
	}

	.chongzhi {
		width: 168rpx;
		height: 72rpx;
		position: absolute;

		image {
			height: 100%;
			width: 100%;
		}

		left: 550rpx;
		top: 140rpx;
	}

	.mealsel {
		width: 168rpx;
		height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		text-align: center;
		margin-right: 11rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		margin-top: 11rpx;
	}

	.mealsel_ed {
		width: 168rpx;
		height: 84rpx;
		background: #37b285;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		text-align: center;
		margin-right: 11rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		margin-top: 11rpx;
	}

	.unipopup {
		height: 820rpx;
		width: 580rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
	}

	.hexiao {
		height: 450rpx;
		width: 520rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.timejindu {
		font-size: 16rpx;
		font-family: ProductSans;
		font-weight: 400;
		color: #9A9A9A;
		text-align: left;
		padding-left: 32rpx;
	}

	.mealname {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.dates {
		padding-left: 32rpx;
		padding-top: 28rpx;
		width: 750rpx;
		height: 90prx;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.tuangoutitle {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #909090;
		line-height: 100rpx;
		margin-left: 6rpx;
		float: left;
	}

	.tuangoutxt {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 100rpx;
		margin-left: 18rpx;
		float: right;
	}

	.tuangouicon {
		position: absolute;
		right: 60rpx;
		padding-top: 23rpx;
		color: #37b285;

	}

	.mealname_ed {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
	}

	.mealprice {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
	}

	.mealprice_ed {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.selectmeal {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #29936d;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d
	}

	.selecttime {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #29936d;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d
	}

	.successtxt {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}

	.desc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.drugimg image {
		width: 190rpx;
		height: 190rpx;
	}

	.jindu {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 24rpx;
		line-height: 220rpx;
		font-weight: 600;
		font-size: 30rpx;
		text-align: center;
		box-shadow: 0 0 10px #b4cec0;
	}

	.moshi {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #1A1A1A;
		text-align: center;
		line-height: 88rpx;
		border-bottom-style: solid;
		border-bottom-color: #d4d4d4;
		border-bottom-width: 1rpx;
	}

	.mealdetail {
		height: auto;
		padding-left: 32rpx;
		padding-top: 29rpx;
	}

	.zhifutuan {
		margin-left: 32rpx;
		margin-top: 30rpx;
		padding-left: 32rpx;
		width: 686rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 24rpx;
		font-weight: 600;


	}

	.status {
		height: 60rpx;
		width: 130rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		color: #b0b0b0;
		font-weight: 600;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		margin-top: 70rpx;
		margin-left: 20rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #b0b0b0;
	}

	.currentOrder {
		color: #6c6c6c;
		font-weight: 400;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 10rpx;
	}

	.info {
		height: 230rpx;
		width: 100%;
		padding-top: 10rpx;
		padding-left: 22rpx;
	}

	.buttomafrim {
		width: 200rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.tuangou {
		width: 600rpx;
		height: 100rpx;


	}

	.buttomupdate {
		width: 200rpx;
		height: 80rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		;
		line-height: 80rpx;
		text-align: center;
		margin-left: 80rpx;
	}

	.mealinfo {
		// overflow: auto;
		padding-left: 34rpx;
		background-color: #ebebeb;
		padding-top: 15rpx;
		height: auto;
	}

	.xuzhitxt {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ff0004;
	}

	.hexiaoimg {
		width: 190rpx;
		height: 100rpx;
	}

	.xuzhi {
		width: 600rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		padding-top: 10rpx;
		position: relative;
	}

	.drugtit {
		width: 690rpx;
		height: 86rpx;
		font-size: 32rpx;
		line-height: 86rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.drugcontent {
		width: 750rpx;
		height: auto;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		background-color: #29936d;
	}

	.coulumdetail {
		flex: 1;
		text-align: center;
		background-color: #ffffff;
		color: #29936d;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}

	.coulumdetail-selected {
		flex: 1;
		text-align: center;
		background-color: #29936d;
		color: #29936d;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}

	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
			position: relative;
		}
	}

	.meal-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;

		.meal-item {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #29936d;
			color: #29936d;
		}

		.mealItem {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #29936d;
			color: #fffff
		}

		.meal-item-selected {
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #29936d;
			color: #ffffff;
		}

		.meal-item2 {
			font-size: 24rpx;
			color: #FFFFFF;
			height: 60rpx;
			line-height: 60rpx;
			width: 500rpx;
			background-color: #29936d;
			border-radius: 15rpx;
		}
	}

	.starttime {
		width: 331rpx;
		height: 72rpx;
		background: #FFFFFF;
		border: 1px solid #C2C2CC;
		border-radius: 36rpx;
		line-height: 72rpx;
		padding-left: 28rpx;
	}

	.kaishitime {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.kaishi {
		font-size: 30rpx;
		font-family: ProductSans;
		font-weight: bold;
		color: #37b285;
		margin-left: 70rpx;
	}

	.time-content {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.start-time {
			padding-left: 60rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.sel-starttime {
			width: 600rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #29936d;
			border-radius: 12rpx;
			text-align: center;
			color: #29936d;
			letter-spacing: 2rpx;
		}

		.end-time {
			padding-left: 60rpx;
			margin-top: 20rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
		}
	}

	.typeName {
		font-weight: 900;
		font-size: 30rpx;
		color: #29936d;
		letter-spacing: 3rpx;
		margin-top: 20rpx;
	}

	.meal-desc-content {
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		border-radius: 10rpx;

		.meal-desc-title {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			background-color: #29936d;
			border-radius: 9rpx;
			color: #ffffff;

		}

		.meal-desc {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
		}
	}
</style>
